@extends('layouts.back_stage')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/webuploader/css/webuploader.css">
    <script type="text/javascript" src="{{ env('CDN_DOMAIN_NAME') }}/webuploader/dist/webuploader.js"></script>
    <style>
        .xing{color:red;}
        .form_ul{width:100%;height:30px;margin-bottom:20px;}
        .form_li{width:215px;line-height:30px;margin-right:20px;float:left;font-size:14px;}
        .form_inp{width:130px;height:30px;line-height:30px;font-size:14px;float:right;outline:none;border:1px solid #cfdada;background:#fff;border-radius:2px;padding:6px 12px;color:#555;box-shadow: none;}
        .pic_li{width:85px;height:120px;line-height:120px;float:left;}
        .wabei{width:110px;height:110px;float:left;border:1px solid #ccc;margin:5px 10px 5px 0;cursor:pointer;position:relative;}
        .wabei img{width:100%;height:100%;}
        .addwabei{width:110px;height:110px;float:left;margin:5px 10px 5px 0;cursor:pointer;}
        .addwabei i{width:100%;height:100%;font-size:102px;margin-top:5px;}
        .desTxt,.offerTxt{float:right;width:500px;height:70px;border:1px solid #ccc;resize:none;}
        #inpRadio{float: left;margin:8px 10px 0 15px;}
        .sps{float:left;height: 30px;line-height: 30px;}
        .over_add{margin-left:530px;}
        .delete-img{cursor: pointer;position: absolute;top: 0;right: 0;width: 30px;height: 30px;background: #000;opacity: 0.5;display:none;}
        .delete-img i{font-size: 24px;color: #fff;margin: 3px 6px;}
        .bus-upload-img{cursor: pointer;}
        .delete-video{cursor: pointer;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 1000;}
        .video-upload-img{cursor: pointer;}
        .webuploader-pick{display:block;padding:0;color:#383838;background: #F5F5F5;text-align: start;cursor:pointer;}
        .wabei .webuploader-pick{width:100%;height:100%;background:none;display:block;padding:0;}
        .wabei .add_bar{position:absolute;top:45%;left:10%;z-index:10000;width:80%;height:10px;background:#abcdef;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
        .wabei .add_fail{position:absolute;bottom:-10px;right:0;z-index:10000;width:100%;height:30px;line-height:30px;background:red;text-align:center;color:#fff;font-size:12px;}
        .expre,.advise{display:none;}
    </style>
    <div class="container">
        <div style="padding:20px 0;"><h3>退换货工单</h3></div>
        <div style="width:90%;margin-left:35px;">
            <div class="form-group"><h3>客户信息</h3></div>
            <div class="form-group">
                <ul class="form_ul">
                    <li class="form_li"><span class="xing">*</span>客户姓名：<input class="form_inp useName" value="{{$infos->customer_name}}" maxlength="7" type="text" autocomplete="off" autocorrect="off" placeholder="请输入客户姓名" /></li>
                    <li class="form_li">手机号：<input class="form_inp useTel"  value="{{$infos->customer_tel}}" maxlength="11" type="text" autocomplete="off" autocorrect="off" placeholder="请输入手机号" /></li>
                </ul>
            </div>
            <div class="form-group"><h3>商品信息</h3></div>
            <div class="form-group">
                <ul class="form_ul">
                    <li class="form_li"><span class="xing">*</span>商品款号：<input class="form_inp girard"  value="@if(count($img_infos)>0){{$img_infos[0]->girard}}@endif"  maxlength="10" type="text" autocomplete="off" autocorrect="off" placeholder="请输入商品款号" /></li>
                </ul>
                <ul class="form_ul" style="height:120px;">
                    <li class="pic_li"> 退换图片：</li>
                    @if(count($img_infos)>0)
                        @foreach($img_infos as $k => $v)
                            @if(!empty($v->img_url))
                            <li id="WU_FILE_0" class="wabei upload-state-done">
                                <img src="{{ env('CDN_DOMAIN_NAME') }}/work_order/{{$v->img_url}}" id="{{$v->id}}">
                                <div class="delete-img"><i class="fa fa-trash-o"></i></div>
                            </li>
                            @endif
                        @endforeach
                    @endif
                    <li class="addwabei li_jia" id="bus-upload-img" abc="{{$id}}"><i class="fa fa-photo"></i></li>
                </ul>
                <ul class="form_ul" style="height:70px;">
                    <li class="form_li" style="width:585px;"><span class="xing">*</span>问题描述：
                        <textarea class="desTxt">{{$infos->description}}</textarea>
                    </li>
                </ul>
            </div>
            <div class="form-group"><h3>其他信息</h3></div>
            <div class="form-group">
                <ul class="form_ul">
                    <span class="sps"><span class="xing">*</span>商品寄出：</span>
                    <li class="form_li" style="width:150px;">
                        <input class="form_inp" id="inpRadio" checked type="radio"  name="tity" value="-1" />
                        <span class="sps">未寄出</span>
                    </li>
                    <li class="form_li">
                        <input class="form_inp" id="inpRadio" type="radio" name="tity" value="1" />
                        <span class="sps">已寄出</span>
                    </li>
                </ul>
            </div>
            <div class="form-group expre">
                <ul class="form_ul">
                    <li class="form_li" style="width:300px;"><span class="xing">*</span>快递单号：<input style="width:216px;"  class="form_inp express_num" type="text" autocomplete="off" autocorrect="off" placeholder="请输入快递单号" value="{{$infos->express_num}}" /></li>
                </ul>
            </div>
            <div class="form-group advise">
                <ul class="form_ul" style="height:70px;">
                    <li class="form_li" style="width:585px;">建议方案：
                        <textarea class="offerTxt">{{$infos->proposal}}</textarea>
                    </li>
                </ul>
            </div>
            <div class="form-group"><button type='button' class='over_add btn btn-success'>提交</button></div>
        </div>
    </div>
    <script>
        var domain = "{{ env('UPLOAD_IMG_DOMAIN') }}";
        /*选择商品图片点击*/
        /*跳转手机相册*/
        // 初始化Web Uploader
        var produc_id = $('.addwabei').attr("abc");
        var uploader = WebUploader.create({
            // 选完文件后，是否自动上传。
            auto: true,
            //fileNumLimit:9,
            // swf文件路径
            swf: '/webuploader/dist/js/Uploader.swf',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            formData:{
                pid:produc_id
            },
            // 文件接收服务端。
            server:domain+'/work-order/upload-img',
            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#bus-upload-img',
            duplicate :true,
            //compress: false,
            //threads:1,上传并发数。允许同时最大上传进程数,为了保证文件上传顺序
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                //mimeTypes:'image/*'
                mimeTypes:'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
            }
        });
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                '<li id=' + file.id + ' class="wabei" >' +
                '<img >' +
                '</li>'
                ),
            $img = $li.find('img');
            $('.li_jia').before( $li );
            if($('.wabei').length>5){
                $('.li_jia').hide();
            }else{
                $('.li_jia').show();
            }
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr( 'src', src );
            });
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');
            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="add_bar" style="margin-left: 0px"></p>')
                    .appendTo( $li )
                    .find('p');
            }
            $percent.css( 'width', percentage * 100 + '%' );
        });
        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ,response) {
            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                }else{
                    //console.log(response)
                    if(response.msg == '-1') {
                        $( '#'+file.id ).remove();
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text("最多只能上传六张");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                        /*删除图片*/
                    }else if(response.msg == '-2'){
                        $( '#'+file.id ).remove();
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text("图片大小超出最大限额");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                        /*删除图片*/
                    }else{
                        $('#' + file.id).append("<div class='delete-img'><i class='fa fa-trash-o'></i></div>");
                        $('#' + file.id).children('img').attr('id', response.info.img_id);
//                        $('#' + file.id).children('img').attr('class', 'delete-img');
                    }
                }
            }, 200, 200 );
            $( '#'+file.id ).addClass('upload-state-done');
        });
        // 文件上传失败，显示上传出错。
        uploader.on( 'uploadError', function( file ) {
            var $li = $( '#'+file.id ),
                $error = $li.find('div.error');
            // 避免重复创建
            if ( !$error.length ) {
                $error = $('<p class="add_fail"></p>').appendTo( $li );
            }
            $error.text('图片过大,上传失败');
            $('#' + file.id).children('img').attr('class', 'error-img');
            if($('.wabei').length>5){
                $('.li_jia').hide();
            }else{
                $('.li_jia').show();
            }
            $('.add_fail').parent('.wabei').click(function(){
                $("#btnDelTrue").addClass("img_err");
                var that=$(this);
                $(".delDiv").show();
                $(".mask").show();
                $(document).on('click','.img_err',function(){
                    $(".delDiv").hide();
                    $(".mask").hide();
                    that.remove();
                    $(".expurgate").text('删除成功');
                    /*删除图片*/
                    $(".expurgate").show(0).delay(1000).hide(0);
                    $("#btnDelTrue").removeClass("img_err");
                    if($('.wabei').length>5){
                        $('.li_jia').hide();
                    }else{
                        $('.li_jia').show();
                    }
                })
            })
        });
        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
            $( '#'+file.id ).find('.add_bar').remove();
        });
        //删除显示隐藏
        $(document).on('mouseenter','.wabei',function(){
            $(this).children(".delete-img").show();
        });
        $(document).on('mouseleave','.wabei',function(){
            $(this).children(".delete-img").hide();
        });
        $(document).on('click','.delete-img',function(){
            $(".oText").text("确定要删除吗？");
            $(".oMask").show();
            $(".oAnim").show();
            $(".oBtn0").attr("abc",$(this).siblings("img").attr('id'));
            $(".oBtn0").attr('id','');
            $(".oBtn0").attr('id','oImg');
        });
        $(document).on('click','#oImg',function(){
            var img_id  = $(this).attr('abc');
            $.ajax({
                url:'/work-order/delete-img',
                type:'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                data:{img_id:img_id},
                dataType:'json',
                success:function(data){
                    if(data.success == true){
                        $(".oMask").hide();
                        $(".oAnim").hide();
                        /*删除图片*/
                        $('#'+img_id).parent('.wabei').remove();
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text("删除成功");
                        $(".oSuccess").show(0).delay(1000).hide(0);
                        $('#btnDelTrue').removeAttr("id");
                        if($('.wabei').length>5){
                            $('.li_jia').hide();
                        }else{
                            $('.li_jia').show();
                        }
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                        $('#btnDelTrue').removeAttr("id");
                        if($('.li_img').length>5){
                            $('.li_jia').hide();
                        }else{
                            $('.li_jia').show();
                        }
                    }
                }
            });
        });
        if($('.wabei').length>5){
            $('.li_jia').hide();
        }else{
            $('.li_jia').show();
        }
        //单选寄出已寄出
        $('input[name="tity"]').change(function(){
            if($(this).val()==-1){
                $(".expre").hide();
                $(".advise").hide();
            }else if($(this).val()==1){
                $(".expre").show();
                $(".advise").show();
            }
        });
        //提交
        $(".over_add").click(function(){
            var id=$('.addwabei').attr("abc");
            var customer_name=$(".useName").val();
            if(customer_name==''){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请填写客户姓名");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            if ( !(/^[\u4e00-\u9fa5]{2,8}$/.test( customer_name )) ) {
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("客户姓名为2-4个中文字符");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            var customer_tel=$(".useTel").val();
            if(customer_tel!=''){
                if ( !(/^1[34578]\d{9}$/.test( customer_tel )) ) {
                    $(".faceImg").attr("src","/img/weep.png");
                    $(".oHandle").text("手机号码格式不正确");
                    $(".oSuccess").show(0).delay(1000).hide(0);
                    return false;
                }
            }
            var girard=$(".girard").val();
            if(girard==''){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请填写商品款号");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            var description=$(".desTxt").val();
            if(description==''){
                $(".faceImg").attr("src","/img/weep.png");
                $(".oHandle").text("请填写问题描述");
                $(".oSuccess").show(0).delay(1000).hide(0);
                return false;
            }
            var is_send=$('input:radio[name="tity"]:checked').val();
            if(is_send==-1){
                var express_num='';
                var proposal='';
            }else if(is_send==1){
                var express_num=$(".express_num").val();
                if ( !(/^[A-Za-z0-9]+$/.test( express_num )) ) {
                    $(".faceImg").attr("src","/img/weep.png");
                    $(".oHandle").text("快递号只能输入英文或者数字");
                    $(".oSuccess").show(0).delay(1000).hide(0);
                    return false;
                }
                var proposal=$(".offerTxt").val();
            }
            $.ajax({
                url:'/work-order/work-order-increase',
                type:'post',
                data:{
                    id:id,
                    type:'add',
                    customer_name:customer_name,
                    customer_tel:customer_tel,
                    girard:girard,
                    description:description,
                    is_send:is_send,
                    express_num:express_num,
                    proposal:proposal
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                dataType:'json',
                success:function(data){
                    if(data.success){
                        $(".over_add").attr("disabled","disabled");
                        $(".faceImg").attr("src","/img/laugh.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(800).hide(0);
                        setTimeout(function(){
                           window.location.href='/work-order/work-order-lists';
                        },800);
                    }else{
                        $(".faceImg").attr("src","/img/weep.png");
                        $(".oHandle").text(data.msg);
                        $(".oSuccess").show(0).delay(1000).hide(0);
                    }
                }
            })
        })
    </script>
@endsection